| 图片预览组件 可放大缩小 旋转 拖动 滚轮滑动 | 您所在的位置：网站首页 › click boom是什么 › 图片预览组件 可放大缩小 旋转 拖动 滚轮滑动 |
|
竖图横图旋转放大缩小重置
export default {
name: "HomeView",
data() {
return {
imageUrl: "",
imageUrl1: require("@/assets/img1.jpg"),
imageUrl2: require("@/assets/img2.jpg"),
imgW: 0,
imgW: 0,
imgH: 0,
deg: 0,
top: 0,
left: 0,
scale: "scale(1)",
size: 0,
mousewheelevt: null,
};
},
mounted() {
this.imageUrl = this.imageUrl1; //初始化图片this.initImage();// 兼容火狐浏览器
this.mousewheelevt = /Firefox/i.test(navigator.userAgent)
? "DOMMouseScroll"
: "mousewheel"; // 为空间区域绑定鼠标滚轮事件 =》 处理函数是wheelHandle// 如果你监听了window的scroll或者touchmove事件，你应该把passive设置为true，这样滚动就会流畅很多
this.$refs.maskBox.addEventListener(this.mousewheelevt, this.wheelHandle, {
passive: true,
});
},
beforeDestroy() {
//取消监听
this.$refs.maskBox.removeEventListener(
this.mousewheelevt,
this.wheelHandle,
{ passive: true }
);
},
methods: {
/** * 切换图片 *flag: 1竖图 2 横图 */
switchImgHandle(flag) {
if (flag === 1) {
this.imageUrl = this.imageUrl1;
} else {
this.imageUrl = this.imageUrl2;
}
this.handleReset();
},
/** * 获取图片的url * @param {string} url */
getImgSize(url) {
return new Promise((resolve, reject) => {
let imgObj = new Image();
imgObj.src = url;
imgObj.onload = () => {
resolve({ width: imgObj.width, height: imgObj.height });
};
});
},
/** * 初始化图片 */
async initImage() {
if (!this.imageUrl) {
return;
}
let { width, height } = await this.getImgSize(this.imageUrl); // 设置原始图片的大小
let realWidth = width;
let realHeight = height; // 获取高宽比例
const whRatio = realWidth / realHeight;
const hwRatio = realHeight / realWidth; //获取盒子的大小
const boxW = this.$refs.maskBox.clientWidth;
const boxH = this.$refs.maskBox.clientHeight;
if (realWidth >= realHeight) {
this.imgH = hwRatio * boxW;
const nih = this.imgH;
if (nih > boxH) {
this.imgH = boxH;
this.imgW = whRatio * boxH;
} else {
this.imgW = boxW;
}
this.top = (boxH - this.imgH) / 2;
this.left = (boxW - this.imgW) / 2;
} else {
this.imgW = (boxH / realHeight) * realWidth;
this.imgH = boxH;
this.left = (boxW - this.imgW) / 2;
}
},
/** * 旋转 */
handleRotate() {
this.deg += 90;
if (this.deg >= 360) {
this.deg = 0;
}
this.size = 0;
this.scale = `scale(1) rotateZ(${this.deg}deg)`;
},
/** * 图片的缩放 *zoom >0 放大 *zoom 火狐浏览器判断滚轮的方向是属性 detail，谷歌和ie浏览器判断滚轮滚动的方向是属性 wheelDelta
// dir = -dir;
// dir > 0 => 表示的滚轮是向上滚动，否则是向下滚动 => 范围 (-120 ~ 120)
const dir = ev.detail ? ev.detail * -120 : ev.wheelDelta; //滚动的数值 / 2000 => 表示滚动的比例，用此比例作为图片缩放的比例
this.imgScaleHandle(dir / 2000);
},
/** * 处理图片拖动 */
onmousedownHandle(e) {
const that = this;
this.$refs.maskBox.onmousemove = function (el) {
const ev = el || window.event; // 阻止默认事件
ev.preventDefault();
that.left += ev.movementX;
that.top += ev.movementY;
};
this.$refs.maskBox.onmouseup = function () {
// 鼠标抬起时将操作区域的鼠标按下和抬起事件置为null 并初始化
that.$refs.maskBox.onmousemove = null;
that.$refs.maskBox.onmouseup = null;
};
if (e.preventDefault) {
e.preventDefault();
} else {
return false;
}
},
},
};
.home {
width: 1000px;
margin: 50px auto;
}
.btn-area {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 50px;
}
.btn-area button {
width: 100px;
height: 40px;
font-size: 18px;
margin-right: 10px;
}
.image-box {
position: relative;
margin: 0 auto;
width: 1000px;
height: 700px;
border: 1px solid #333;
overflow: hidden;
}
.image-box img {
position: absolute;
cursor: pointer;
}
image.png
以上代码引自 https://blog.csdn.net/Android_boom/article/details/128713466 image.png自己项目中使用到了此组件并且做了针对本项目的处理 比如鼠标拖动图片超出区域后 没有监听到鼠标抬起导致的 图片一直跟着鼠标走的问题 另外一个就是在组件区域内鼠标滚轮滑动实现放大缩小的时候 阻止整个页面跟着滚动等 实现全屏和容器区域内内使用判断 全屏部分还需优化 暂且记录一下 代码如下 {{ size.toFixed(2)*100+50 + '%' }}{{imgIndex+1}} / {{imgList.length}} export default { name: 'PreviewImg', props: { dialogVisibleImg: { type: Boolean, default: true, }, showType: { type: String, default: 'normal' } }, data() { return{ deg: 0, // 旋转角度 bigImgWidth: 100, // 图片宽度 bigImgName: '', // 图片名称 top: 0, left: 0, isNotImg: false, bigImg: false, imgIndex: 0, mousewheelevt: null, scale: "scale(1)", size: 0, imgList: [ { url:'https://img01.yzcdn.cn/vant/apple-1.jpg' }, { url:'https://img01.yzcdn.cn/vant/apple-2.jpg' }, ] } }, created() {}, mounted() { // this.imageUrl = this.imageUrl1; //初始化图片this.initImage();// 兼容火狐浏览器 this.mousewheelevt = /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll" : "mousewheel"; // 为空间区域绑定鼠标滚轮事件 =》 处理函数是wheelHandle// 如果你监听了window的scroll或者touchmove事件，你应该把passive设置为true，这样滚动就会流畅很多 this.$refs.maskBox.addEventListener(this.mousewheelevt, this.wheelHandle, { passive: true, }); // 阻止预览图片区域鼠标滚动放大缩小时 页面滚动 this.$refs.maskBox.onmousewheel = function () { return false }; document.addEventListener("mouseup", ()=> { this.$refs.maskBox.onmousemove = null; this.$refs.maskBox.onmouseup = null; }, true); }, beforeDestroy() { //取消监听 this.$refs.maskBox.removeEventListener( this.mousewheelevt, this.wheelHandle, { passive: true } ); document.removeEventListener("mouseup", ()=> { this.$refs.maskBox.onmousemove = null; this.$refs.maskBox.onmouseup = null; }, true); }, methods: { // 切换事件 setDialogShowType(bol, showType){ this.$emit('setDialogShowType', bol, showType) }, // 下一张 nextImg(){ if(this.imgIndex0){ this.deg = 0 this.top = 0 this.left = 0 this.scale = "scale(1)" this.size = 0 this.bigImgWidth = 100 this.imgIndex-- this.bigImg = this.imgList[this.imgIndex].url } }, /** * 处理图片拖动 */ onmousedownHandle(e) { const that = this; this.$refs.maskBox.onmousemove = function (el) { const ev = window.event; // 阻止默认事件 // console.log('ev:', ev); ev.preventDefault(); that.left += ev.movementX; that.top += ev.movementY; // console.log('------------------------------------------------'); // console.log('that.left:', that.left); // console.log('ev.clientX:', ev.clientX); // console.log('ev.offsetX:', ev.offsetX); // console.log('ev.target.offsetLeft:', ev.target.offsetLeft); // console.log('ev.target.offsetWidth:', ev.target.offsetWidth); // console.log('ev.target.clientLeft:', ev.target.clientLeft); // console.log('ev.target.clientWidth:', ev.target.clientWidth); // console.log('that.top:', that.top); }; this.$refs.maskBox.onmouseup = function () { // 鼠标抬起时将操作区域的鼠标按下和抬起事件置为null 并初始化 that.$refs.maskBox.onmousemove = null; that.$refs.maskBox.onmouseup = null; }; if (e.preventDefault) { e.preventDefault(); } else { return false; } }, /** * 鼠标滚动 实现放大缩小 */ wheelHandle(e) { const ev = e || window.event; // 兼容性处理 => 火狐浏览器判断滚轮的方向是属性 detail，谷歌和ie浏览器判断滚轮滚动的方向是属性 wheelDelta // dir = -dir; // dir > 0 => 表示的滚轮是向上滚动，否则是向下滚动 => 范围 (-120 ~ 120) const dir = ev.detail ? ev.detail * -120 : ev.wheelDelta; //滚动的数值 / 2000 => 表示滚动的比例，用此比例作为图片缩放的比例 this.imgScaleHandle(dir / 2000); }, /** * 图片的缩放 *zoom >0 放大 *zoom 0.9){ this.size = 0.9 } this.scale = `scale(${1 + this.size}) rotateZ(${this.deg}deg)`; }, /** * 旋转 */ handleRotate(type) { if(type === 1){ this.deg += 90; } else { this.deg -= 90; } if (this.deg >= 360) { this.deg = 0; } this.size = 0; this.scale = `scale(1) rotateZ(${this.deg}deg)`; }, }, }; .el-icon-down-box { img { cursor: pointer; } } .el-icon-down-box { img { width: 60px; height: 60px; } } .normal{ height: 100%; overflow: hidden; position: relative; // background-color: #000000; } /* 模糊 */ .big:after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: inherit; filter: blur(10px); z-index: -1; } .big{ width: 100%; height: 100vh; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background:rgba(2, 9, 25, 0.7); z-index: 2000; padding: 50px 110px; } .img-bg { box-sizing: border-box; .img-count{ width: 100%; height: 2rem; position: absolute; bottom: 0.6rem; display: flex; align-items: center; justify-content: center; z-index: 2; .show-page{ border-radius: 1rem; background-color: rgba(0,0,0,.2); padding: 0.4rem 1rem; font-weight: 400; color: #fff; font-size: 0.8rem; } img{ width: 24px; height: 24px; cursor: pointer; } } .img-change{ position: absolute; width: 100%; // height: 100%; z-index: 2; top: calc(50% - 1rem); img{ width: 2rem; height: 2rem; cursor: pointer; } i{ font-size: 1.5rem; color: #409eff; } .left,.right{ position: absolute; width: 2rem; height: 2rem; // opacity: 0.5; background: #ffffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 1px 2px 30px 5px rgba(0, 0, 0, 0.3); font-size: 2rem; // position: fixed; // top: 50%; cursor: pointer; } .left{ left:80px; } .right{ right:80px; } } .img-top { // border: 1px solid red; position: absolute; top: 0; width: 100%; height: 1.6rem; display: flex; align-items: flex-start; justify-content: center; z-index: 2; .handle-box{ width: 8rem; height: 100%; padding: 0 0.4rem; // background-color: #000000; user-select: none; background-color: rgb(255, 255, 283); box-shadow: 0 0 0.3rem 0 rgba(0,0,0,.15); border-radius: 0 0 0.3rem 0.3rem; display: flex; justify-content: center; align-items: center; span{ color: #448aff; font-size: 0.7rem; } i{ color: #448aff; font-size: 0.9rem; margin: 0 0.5rem; cursor: pointer; font-weight: 600; } .icon{ height: 0.85rem; width: 0.85rem; } } img{ width: 24px; height: 24px; margin-right: 32px; cursor: pointer; } } .img-bg-box { position: relative; width: 100%; height: 100%; .img-bg-box-video { height: 100%; max-height: 100vh; display: flex; align-items: center; .img-content { width: 100%; max-height: calc(100vh - 100px); display: flex; justify-content: center; align-items: self-start; video{ max-height: calc(100vh - 20px); } } } .img-bg-box-img { width: 100%; height: 100%; .img-content { width: 100%; height: 100%; position: relative; // display: flex; // justify-content: center; // align-items: self-start; img { position: absolute; // width: 100%; object-fit: contain; } } } } } video::-webkit-media-controls-fullscreen-button { display: none; } |
| CopyRight 2018-2019 实验室设备网 版权所有 |